<template>
    <view class="outView">
        <uni-nav-bar backgroundColor="#3183FB" style="width: 100%;" :border="false" color="#fff"
            title="欢迎来到车联网服务平台商家端"></uni-nav-bar>
        <image class="topBackgroundImage" src="/static/组 6@2x.png" mode=""></image>
        <image class="third-child-img" src="/static/组 6@2x(1).png" mode=""></image>
        <view class="innerView">
            <form action="">
                <view class="content">
                    <view class="input-box">
                        <!-- 绑定输入框数据 -->
                        <input type="text" v-model="baseFormData.phone" placeholder="手机号登录" />
                    </view>
                    <view class="input-box">
                        <!-- 绑定输入框数据 -->
                        <input type="text" style="padding-right: 200rpx;" v-model="baseFormData.code"
                            placeholder="输入验证码" />
                    </view>
                    <!-- 绑定点击事件 -->
                    <view class="verificationCode"
                        ref="verificationCode"
                        style="width: 180rpx; border-radius: 60rpx; height: 60rpx; font-size: 26rpx;line-height: 60rpx; "
                        @click="getVerificationCode">
                        {{ countdown > 0 ? `${countdown}s 后重试` : '获取验证码' }}
                    </view>
                </view>
            </form>
            <navigator url="/pacakgeBase/register/register" class="registerNow">
                立即注册>
            </navigator>
            <view class="login-button" @click="submit('valiForm')">登录</view>
        </view>
    </view>
</template>

<script>
import { getCode,login } from "@/api/shop/login.js";
import tokenUtils  from "@/api/token.js";
export default {
    data() {
        return {
            baseFormData: {
                phone: '',
                code: '',
            },
            countdown: 0, // 倒计时秒数
            timer: null // 定时器引用
        }
    },
	onLoad() {
		
		
		
	},
    methods: {
        submit(type) {
            // 获取用户输入的数据
            let loginForm={
				mobile:this.baseFormData.phone,
				code:this.baseFormData.code
			}
			
			console.log('登录参数', loginForm);
			
			login(loginForm).then(res=>{
					console.log('登录成功接收数据vue', res);
					
					uni.reLaunch({
								url:"/pages/index/index"
							});
			})
			.catch(err=>{
				console.log('登录失败', err );
			})
			

            // 定义请求的 URL，这里需要替换为你实际的后端接口地址
            // const apiUrl = 'http://localhost:8080/business/login';

     //        // 使用 uni.request 发送 POST 请求
     //        uni.request({
     //            url: apiUrl,
     //            method: 'POST',
     //            data: {
     //                mobile:phone,
     //                code:code
     //            },
     //            success: (res) => {
     //                // 请求成功，打印后端返回的数据
					// uni.showToast({
					//     title: '登录成功',
					//     icon: 'success'
					// });
					// //重定向到首页
					// uni.reLaunch({
					// 	url:"/pages/index/index"
					// });
     //                console.log('后端返回的数据:', res.data);
					
     //            },
     //            fail: (err) => {
     //                // 请求失败，打印错误信息
     //                console.error('请求失败:', err);
     //            },
     //        });
        },
        getVerificationCode() {
            const phone = this.baseFormData.phone;
            // 简单验证手机号是否为空
            if (!phone) {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                });
                return;
            }
            // 可以添加更复杂的手机号格式验证

            console.log("接收到手机号", phone);
			
			getCode(phone).then((res)=>{
				uni.showToast({
				    title: '验证码已发送',
				    icon: 'none'
				});
				
			})
			.catch((err)=>{
				
				  console.log("验证码发送失败");
			})

      
          
        },
        startCountdown() {
            this.countdown = 60; // 设定倒计时 60 秒
            this.timer = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                } else {
                    clearInterval(this.timer);
                    this.timer = null;
                }
            }, 1000);
        }
    },
    watch: {
        countdown(newVal) {
            // 不需要手动操作 DOM，数据绑定会自动更新视图
        }
    },
    beforeDestroy() {
        // 组件销毁时清除定时器
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
    }
};
</script>

<style>
page {
    background-color: white;
}

.outView {
    position: relative;
    width: 750rpx;
    height: 300rpx;
}

.topBackgroundImage {
    width: 750rpx;
    height: 300rpx;
    z-index: 1;
    position: absolute;
}

.third-child-img {
    top: 100%;
    left: 300rpx;
    position: absolute;
    z-index: 3;
    transform: translate(-25%, -25%);
    width: 240rpx;
    height: 180rpx;
}

.innerView {
    position: absolute;
    width: 750rpx;
    height: 300rpx;
    background-color: white;
    border-radius: 30rpx;
    z-index: 2;
    top: 240%;
    left: 50%;
    transform: translate(-50%, -75%);
    /* display: flex; */
}

.uni-forms {
    margin-top: 80rpx;
    margin-left: 150rpx;
    position: relative;
}

.uni-forms-item {
    width: 450rpx;
}

.verificationCode {
    position: absolute;
    right: 140rpx;
    top: 80rpx;
    background-color: #4C8EFE;
    text-align: center;
    color: white;
}

.registerNow {
    margin-top: -30rpx;
    margin-left: 20rpx;
    margin-bottom: 30rpx;
    position: relative;
    right: -100rpx;
    color: #4D8EFE;
    font-size: 26rpx;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 800rpx;
    position: relative;
    right: 30rpx;
}

.input-box {
    margin-bottom: 40rpx;
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    width: 500rpx;
    border-bottom: 2rpx solid #DEDEE0;
}

.login-button {
    text-align: center;
    width: 500rpx;
    border-radius: 30rpx;
    height: 60rpx;
    font-size: 28rpx;
    line-height: 60rpx;
    background-image: linear-gradient(to right, #3385FC, #0863E7);
    color: white;
    margin: 0 auto;
    /* 水平居中 */
}
</style>